<template>
<div>
  <el-table
    :data="rows"
    stripe
    style="width: 100%">
    <el-table-column prop="description" label="角色名称">
    </el-table-column>
    <el-table-column prop="name" label="角色编码">
    </el-table-column>
    <el-table-column label="权限管理">
        <template slot-scope="{row}">
            <el-link @click="onClickPerm(row)">权限修改</el-link>
        </template>
    </el-table-column>
    <el-table-column label="监控区管理">
        <template slot-scope="{row}">
            <el-link @click="onClickArea(row)">点击修改</el-link>
        </template>
    </el-table-column>
    <el-table-column prop='remark' label="备注">
    </el-table-column>
  </el-table>
  <tree-permissions ref='perm'/>
</div>
</template>

<script>
import treePermissions from './permissions.vue'

  export default {
    components: {treePermissions},
    data() {
      return {
        rows: [],
      }
    },
    created() {
        this.axios.get('/roles')
            .then(res => {
                this.rows = res.data
            })
    },
    methods: {
        onClickPerm(row) {
          this.$refs.perm.open(row)
        },
        onClickArea(row) {

        }
    }
  }
</script>